<template>
  <el-dialog v-model="selectFieldDialogInfo.dialogVisible" :title="selectFieldDialogInfo.title" width="600"
    @close="closeSelectFieldDialog" :close-on-click-modal="false">
    <div class="flex justify-between">
      <div class="w-48%">
        <div class="mb-16px">
          <el-input v-model="searchField" style="width: 100%" placeholder="请输入关键字查询">
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </div>
        <div class="border-1px border-solid border-gray-200 h-396px mb-16px">
          <el-scrollbar v-if="allFieldList.length">
            <div v-for="item in allFieldList" :key="item.id" class="p-2 mb-1 flex items-center b-1px b-solid b-#eee">
              <el-checkbox :value="item.id" :checked="selectedList.includes(item.id)"
                @change="handleCheckedChange($event, item.id)" />
              <div class="flex-1" @click="handleNodeClick(item)">{{ item.title }}</div>
            </div>
          </el-scrollbar>
          <div v-else class="flex flex-col items-center justify-center h-full">
            <el-empty description="暂无数据" />
          </div>
        </div>
        <div class="flex items-center justify-between">
          <div>
            <el-button link icon="RefreshRight"></el-button>
          </div>
          <div class="flex items-center">
            <div class="color-#6b6b6b font-size-14px">没找到字段？</div>
            <div>
              <el-button link icon="Plus" type="primary" @click="openAddField">添加字段</el-button>
            </div>
          </div>
        </div>
      </div>
      <div class="w-48% h-480px border-1px border-solid border-gray-200">
        <el-form :model="previewForm" disabled label-position="top" style="padding: 10px;">
          <el-form-item label="name">
            <el-input v-model="previewForm.name" />
          </el-form-item>
          <el-form-item label="label">
            <el-input v-model="previewForm.title" />
          </el-form-item>
          <el-form-item label="字段类型">
            <el-select v-model="previewForm.type" placeholder="请选择">
              <el-option label="输入" value="input" />
              <el-option label="选择" value="select" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="previewForm.type === 'select'" label="待选值" prop="options">
            <div class="mt-1 flex flex-col w-100%">
              <div v-for="(item, index) in previewForm.options" :key="index"
                class="p-5px h-32px pl-10px pr-10px flex items-center b-rd-4px b-1px b-solid b-#eee">
                <div class="w-95%">{{ item }}</div>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <template #footer>
      <div class="flex justify-between items-center">
        <div class="color-#6b6b6b font-size-14px">已选<span class="color-#006ad4">0</span>个字段</div>
        <div class="dialog-footer">
          <el-button @click="closeSelectFieldDialog">取消</el-button>
          <el-button type="primary" @click="submitSelectField()"> 确定 </el-button>
        </div>
      </div>
    </template>
  </el-dialog>
  <add-field ref="addFieldRef"></add-field>
</template>

<script setup lang="ts">
import { ref, onMounted, useTemplateRef } from 'vue'
import { queryFieldList, queryFieldTypeList, createField, delField } from '@/api/field'
import addField from './add-field.vue'
import { type IFieldForm } from '@/api/field/types'


const addFieldRef = useTemplateRef('addFieldRef')

const allFieldList = ref<any[]>([])
const searchField = ref<string>('')

const selectedList = ref<any[]>([])

const selectFieldDialogInfo = ref({
  dialogVisible: false,
  title: ''
})

const previewForm = ref<IFieldForm>({ name: '', title: '', type: '', options: [], defaultValue: '', remark: '', required: false, rules: [] })

const getFieldList = async () => {
  const res: any = await queryFieldList({})
  if (res.code === 0) {
    allFieldList.value = [...res.data]
  }
}

const openSelectFieldDialog = (title: string) => {
  selectFieldDialogInfo.value.dialogVisible = true
  selectFieldDialogInfo.value.title = title
  getFieldList()
}

const closeSelectFieldDialog = () => {
  selectFieldDialogInfo.value.dialogVisible = false
}

const submitSelectField = () => {

}

const handleCheckedChange = (value: any, id: string) => {
  if (value) {
    selectedList.value.push(id);
  } else {
    selectedList.value = selectedList.value.filter((item) => item !== id);
  }
}

const handleNodeClick = (data: any) => {
}

const openAddField = () => {
  addFieldRef.value?.openAddFieldDialog('添加字段')
}
// onMounted(() => { 
//   getFieldList()
// })
defineExpose({ openSelectFieldDialog })
</script>

<style lang="scss" scoped></style>
